import { Component,Input, OnInit,Output,EventEmitter,HostListener,ChangeDetectionStrategy} from '@angular/core';
import {itemAnim} from "../../anims/item.anim";
import * as fromRoot from "../../reducers";
import * as actions from "../../actions/task.action";
import {Store,select} from "@ngrx/store";
@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.scss'],
  animations:[itemAnim],
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class TaskItemComponent implements OnInit {
  @Input() item ;
  @Input() avatar;
  @Output() taskClick = new EventEmitter<void>();
  widerPriority = 'out'
  constructor(private store$:Store<fromRoot.State>) { }

  ngOnInit() {
    this.avatar = this.item.owner?this.item.owner.avatar:"unassign";
    console.log(this.avatar)
  }
  onItemClick(){
    this.taskClick.emit();
  }
  onCheckboxClick(ev:Event,task){
    ev.stopPropagation();
    this.store$.dispatch(new actions.CompleteAction(task));
  }
  @HostListener('mouseenter')
  onMouseEnter(){
    this.widerPriority = 'in';
  }
  @HostListener('mouseleave')
  onMouseLeave(){
    this.widerPriority = 'out';
  }
}
